function DragPlayersAndDrop() {

	this.init = function() {
		var cols = document.querySelectorAll('.draggableField');
		[].forEach.call(cols, function(col) {
			col.addEventListener('dragstart', handleDragStart, false);
			col.addEventListener('dragenter', handleDragEnter, false);
			col.addEventListener('dragover', handleDragOver, false);
			col.addEventListener('dragleave', handleDragLeave, false);
			col.addEventListener('drop', handleDrop, false);
			col.addEventListener('dragend', handleDragEnd, false);
		});
	};

	var handleDragStart = function(e) {
		this.style.opacity = '0.4';
		dragSrcEl = this;
		e.dataTransfer.effectAllowed = 'move';
		e.dataTransfer.setData('text/html', this.innerHTML);
	};

	var handleDragOver = function(e) {
		if (e.preventDefault) {
			e.preventDefault(); // Necessary. Allows us to drop.
		}

		e.dataTransfer.dropEffect = 'move'; // See the section on the
		// DataTransfer object.
		return false;
	};

	var handleDragEnter = function(e) {
		this.addClassName('over');
	};

	var handleDragLeave = function(e) {
		this.removeClassName('over'); // this / e.target is previous target
		// element.
	};

	var handleDrop = function(e) {
		// this / e.target is current target element.

		if (e.stopPropagation) {
			e.stopPropagation(); // stops the browser from redirecting.
		}

		// See the section on the DataTransfer object.
		// Don't do anything if dropping the same column we're dragging.
		if (dragSrcEl != this) {
			// Set the source column's HTML to the HTML of the columnwe dropped
			// on.
			dragSrcEl.innerHTML = this.innerHTML;
			this.innerHTML = e.dataTransfer.getData('text/html');
		}

		return false;
	};

	var handleDragEnd = function(e) {
		// this/e.target is the source node.

		[].forEach.call(cols, function(col) {
			col.removeClassName('over');
		});
	};

	Element.prototype.hasClassName = function(name) {
		return new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)")
				.test(this.className);
	};

	Element.prototype.addClassName = function(name) {
		if (!this.hasClassName(name)) {
			this.className = this.className ? [ this.className, name ]
					.join(' ') : name;
		}
	};

	Element.prototype.removeClassName = function(name) {
		if (this.hasClassName(name)) {
			var c = this.className;
			this.className = c.replace(new RegExp("(?:^|\\s+)" + name
					+ "(?:\\s+|$)", "g"), "");
		}
	};

	var dragSrcEl = null;
}